<template>
  <view class="my-total-box">
    <view class="mt-total-main">
      <view class="main-left">
        <!-- 全选按钮 -->
        <label class="radio" @click="selectAll">
          <radio :checked="isAll" style="transform:scale(0.8);" /><text>全选</text>
        </label>
      </view>
      <!-- 合计 -->
      <!-- 结算按钮 -->
      <view class="main-right">
        <view class="right-total">
          <text class="goodsCount" v-if="goodsNum">已选{{goodsNum}}件,</text>
          <text>合计:</text>
          <text class="price">￥{{checkedGoodsAmount}}</text>
        </view>
        <view class="right-jiesuan">
          <button type="warn" size="mini" @click="gotoPay">结算</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapMutations,
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    name: "my-total",
    data() {
      return {
        newCart: [],
        //延迟几秒跳转
        seconds: 3,
        //定时器id
        timer: null
      };
    },
    computed: {
      ...mapState('user', ['token']),
      ...mapGetters('cart', ['checkedGoodsAmount', 'checkedCount']),
      ...mapGetters('user', ['addStr']),

      //是否全选  
      //另一种方式就是判断，被选中的数量是否和所有商品数量一致
      isAll() {
        let res = this.cart.every((item) => {
          return item.goods_state === true
        })
        //如果全都为true -- 则说明商品都被选择
        if (res) return true
        else return false
      },

      // //统计总价格  —— 可写在vuex中
      // TotailPrice() {
      //   let res = 0
      //   this.cart.forEach((item) => {
      //     if (item.goods_state === true) {
      //       res += item.goods_count * item.goods_price
      //     }
      //   })
      //   return res
      // },

      //统计选择商品件数
      goodsNum() {
        let count = 0
        this.cart.forEach((item) => {
          if (item.goods_state === true) {
            count++
          }
        })
        return count
        //没有返回值？？？
        //   return this.cart.reduce((count, item) => {
        //     if (item.goods_state === true) count++
        //   }, 0)

      }
    },

    props: {
      cart: {
        type: Array,
        default: []
      },
    },

    methods: {
      ...mapMutations('cart', ['selectAllGoods']),
      ...mapMutations('user', ['updateRedirectInfo']),

      //点击全选按钮，选择所有商品 | 取消全部
      selectAll() {
        //如果所有商品被选择了 —— 全部取反
        //不能直接修改cart —— 将其存到vuex中，然后赋值给cart也行
        if (this.isAll) {
          this.cart.forEach(item => item.goods_state = !item.goods_state)
        } else { //商品没有被全部选择
          this.cart.forEach(item => item.goods_state = true)
        }
        //提交给vuex处理
        this.selectAllGoods(this.cart)
      },

      //前往支付页面，跳转前进行验证 是否选择地址、商品、是否登录
      gotoPay() {
        //判断是否勾选了商品
        if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品')
        //判断地址是否选择
        if (!this.addStr) return uni.$showMsg('请选择收货地址!')
        //判断是否登录
        if (!this.token) return this.deleyGologin()

        //上面三个条件满足之后,实现微信支付功能
        this.payOrder()
      },

      //微信支付
      async payOrder() {
        // 1.创建订单
        //整理参数对象
        const ordObj = {
          // order_price:this.checkedGoodsAmount
          order_price: 0.01,
          consignee_addr: this.addStr,
          goods: this.cart.filter(x => x.goods_state).map(x => ({
            goods_id: x.goods_id,
            goods_number: x.goods_count,
            goods_price: x.goods_price
          }))
        }
        //因为权限的问题，之前前面没法获取token，无法显示创建订单成功。所以此处无法正确得到订单编号
        // let {
        //   data: res
        // } = await uni.$http.post('/api/public/v1/my/orders/create', ordObj)
        // console.log(res)
        // if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
        // // 1.3 得到服务器响应的“订单编号”
        // const orderNumber = res.message.order_number
        // console.log(orderNumber)
        //只能写死一个订单编号先
        const orderNumber = "GD20180504000000000045"

        //2.实现订单预支付 —— 根据订单编号发起请求 获取订单支付信息
        // const {
        //   data: res2
        // } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
        //   order_number: orderNumber
        // })
        // if (res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败！')
        //得到订单支付的相关必要参数
        // const payInfo = res2.message.pay
        // console.log(payInfo)
        let payInfo = {
          "timeStamp": "1564730510",
          "nonceStr": "SReWbt3nEmpJo3tr",
          "package": "prepay_id=wx02152148991420a3b39a90811023326800",
          "signType": "MD5",
          "paySign": "3A6943C3B865FA2B2C825CDCB33C5304"
        }
        console.log(payInfo)

        // 3. 发起微信支付
        // 3.1 调用 uni.requestPayment() 发起微信支付
        // const [err, succ] = await uni.requestPayment(payInfo)
        // // 3.2 未完成支付  不允许支付
        // if (err) return uni.$showMsg('订单未支付！')
        // // 3.3 完成了支付，进一步查询支付的结果
        // const {
        //   data: res3
        // } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {
        //   order_number: orderNumber
        // })
        // // 3.4 检测到订单未支付
        // if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
        // // 3.5 检测到订单支付完成
        // uni.showToast({
        //   title: '支付完成！',
        //   icon: 'success'
        // })

      },

      //没有登录时，展示提示消息
      showTip(n) {
        uni.showToast({
          icon: 'none',
          title: '请登录后再结算' + n + '秒后跳转到登录界面',
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1500
        })
      },

      //延迟3秒跳转
      deleyGologin() {
        //先展示
        this.showTip(this.seconds)
        //创建定时器 每过一秒-1
        this.timer = setInterval(() => {
          this.seconds--
          if (this.seconds <= 0) {
            //清除定时器
            clearInterval(this.timer)
            //跳转页面
            uni.switchTab({
              url: '/pages/my/my',
              //页面跳转成功之后
              success: () => {
                this.updateRedirectInfo({
                  openType: 'switchTab',
                  //传回购物车的页面路径 存储到vuex中
                  from: '/pages/cart/cart'
                })
              }
            })
            //重置秒数
            this.seconds = 3
            return
          }
          this.showTip(this.seconds)
        }, 1000)
      },

    }
  }
</script>

<style lang="scss">
  .my-total-box {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    width: 100%;

    .mt-total-main {
      display: flex;
      justify-content: space-between;
      background-color: white;
      height: 100%;

      .main-left {
        .radio {
          display: block;
          margin-top: 10px;
          margin-left: 5px;
          font-size: 14px;
          color: gray;
        }
      }

      .main-right {
        margin-top: 10px;
        margin-right: 10px;
        display: flex;

        .right-total {
          font-size: 13px;
          margin-top: 5px;
          margin-right: 10px;

          .goodsCount {
            font-size: 11px;
            color: gray;
          }

          .price {
            color: #ff681d;
            font-weight: 700;
            font-size: 15px;
          }
        }
      }
    }

  }
</style>
